<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<!-- 外边距？所有元素具备边框以外距离，四个，上下 左右
		 外边距问题1：行内元素  a，i,deleta ...只支持左右边距
		            布局，支持左右推动效果
					解决方法：行转块
			常用margin属性  两个属性值  margin：0 auto；居中-->
		<style>
			h1{
				width: 50%;
				border: 1px solid red;
				/*  margin外边距属性：1个属性值： 上 右 下 左*/
				margin: 300px;   /* ？上下 左右  上下效果没有 ？ */
				/*  margin外边距属性：2个属性值： 上下 左右*/
				margin: 100px 200px;
				/*  margin外边距属性：3个属性值： 上 右左 下*/
				margin: 100px 200px 300px;
				/*  margin外边距属性：4个属性值 上 右 下 左*/
				margin: 100px 200px 300px 400px;
				/* 常用属性：居中自适应 */
				margin: 0 auto;
               /* margin-left: 800px; */
			}
			/* 外边距问题2：外边距合并问题：上下元素都存在外边距，垂直以最大外边距值为主
			               外边距垂直合并：最大外边距为主，怎么解决？
						   推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素其中上，下外边距，重新计算*/
			#parent{
				width: 200px;
				height: 200px;
				background: #ffaaff;
				/* 下外边距 */
				/* margin-bottom: 10px; */
				margin-top: 30px;
				/* 1.必须父元素：border： 1px solid transparent ； */
				/* border: 1px solid transparent; */
				/* 2.必须父元素：overflow：hidden；创建新块上下文，阻止外边距合并 */
				overflow: hidden;
			}
			#child{
				/* 上边距 */
				margin-top: 20px;
				width: 100px;
				height: 100px;
				background: #aaffff;
			}
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		<hr />
		<!-- 元素，存在与框模型=外边距+边框+内边距+内容
		     有些元素默认外边距，处理方案 通配选择器，去掉元素外边距
			 
			 -->
			 
		<span>行内元素</span>
		<h1>块元素</h1>
		<hr />
		<ul>
			<li></li>
		</ul>
		
		<form></form>
		<table>
			<tr>
				<td></td>
			</tr>
		</table>
		<p></p>
		<input type="text" />
	</body>
</html>
<!-- 
    测元素是否存在外边距
    ul  li √
	form  input  ×
	p  √
	table tr td ×
    {margin:0} -->